<a (click)="goBack()" ><i class="fa fa-arrow-left"></i>返回上一页</a>
<div class="portlet-body form">
  <form class="form-horizontal" [formGroup]="productForm" (ngSubmit)="save()" novalidate>
    <div class="form-body">
      <div class="form-group" [class.has-error]="productForm.get('name').touched && productForm.hasError('required','name')">
        <label class="col-md-3 control-label">产品名称</label>
        <div class="col-md-5">
          <input type="text" class="form-control" formControlName="name" [(ngModel)]="product.name">
        </div>
        <span class="help-block" [class.hidden]="productForm.get('name').untouched || !productForm.hasError('required','name')">
              产品名称不能为空
        </span>
      </div>
      <div class="form-group" [class.has-error]="productForm.get('subtitle').touched && productForm.hasError('required','subtitle')">
        <label class="col-md-3 control-label">子标题</label>
        <div class="col-md-5">
          <input type="text" class="form-control" formControlName="subtitle" [(ngModel)]="product.subtitle">
        </div>
        <span class="help-block" [class.hidden]="productForm.get('subtitle').untouched || !productForm.hasError('required','subtitle')">
              子标题不能为空
        </span>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">产品分类</label>
        <div class="col-md-5">
          <select class="form-control" required [ngModelOptions]="{standalone: true}" [(ngModel)]="product.categoryId">
            <option value="{{category.id}}" *ngFor="let category of categoryList">{{category.name}}</option>
          </select>
        </div>
      </div>
      <div class="form-group" [class.has-error]="productForm.get('price').touched && productForm.hasError('required','price')">
        <label class="col-md-3 control-label">价格</label>
        <div class="col-md-5">
          <div class="input-group">
            <input type="number" class="form-control" formControlName="price" [(ngModel)]="product.price">
            <span class="input-group-addon">
            <i class="fa fa-rmb"></i>
            </span>
          </div>
          <span class="help-block" [class.hidden]="productForm.get('price').untouched || !productForm.hasError('required','price')">
              价格不能为空
          </span>
        </div>
      </div>
      <div class="form-group" [class.has-error]="productForm.get('stock').touched && productForm.hasError('required','stock')">
        <label class="col-md-3 control-label">库存</label>
        <div class="col-md-5">
          <div class="input-icon right">
            <input type="number" class="form-control" formControlName="stock" [(ngModel)]="product.stock"> </div>
        </div>
        <span class="help-block" [class.hidden]="productForm.get('stock').untouched || !productForm.hasError('required','stock')">
              库存不能为空
          </span>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">产品状态</label>
        <div class="col-md-5">
          <select class="form-control" required [ngModelOptions]="{standalone: true}" [(ngModel)]="product.status">
            <option value="ON_SALE">在售</option>
            <option value="OFF_SALE">下架</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">产品标识</label>
        <div class="col-md-5">
          <select class="form-control" [ngModelOptions]="{standalone: true}" [(ngModel)]="product.flag">
            <option value="HOT">热销</option>
            <option value="NORMAL">常规</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">详情介绍</label>
        <div class="col-md-5">
          <textarea class="form-control" rows="4" [ngModelOptions]="{standalone: true}" [(ngModel)]="product.detail"></textarea>
        </div>
      </div>

      <div class="form-group last">
        <label class="control-label col-md-3">产品图片</label>
        <div class="col-md-5">
          <div class="fileinput fileinput-new" data-provides="fileinput">
            <div class="fileinput-new thumbnail" style="float: left" *ngFor="let img of subImageList;let i = index">
              <img [src]="img" alt="产品图片" (click)="deleteImg(img,i)"/>
            </div>
            <div>
              <input type="file" #file id="file" (change)="upload(file)" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="form-actions">
      <div class="row">
        <div class="col-md-offset-3 col-md-5">
          <button type="submit" class="btn green">提交</button>
        </div>
      </div>
    </div>
  </form>
</div>
